import { View, Button, StyleSheet, Image, TouchableHighlight } from 'react-native'
import React from 'react'
import { Box, Text, Row, Column, Pressable, useColorMode } from 'native-base'
import Ionicons from 'react-native-vector-icons/Ionicons'
import TouchableImage from './TouchableImage'
import { useNavigation } from '@react-navigation/native'


function ArticleItem({ item, siteid, plateid, viewerRef, index }) {
    const navigation = useNavigation()
    const itemPress = () => {
        navigation.navigate({ name: 'detail', params: { ...item, siteid, plateid } })
    }
    return (

        <View style={styles.card}>

            {
                item.posterImg ?
                    <TouchableImage
                        imgkey={`key-${item.posterImg}-${index}`}
                        url={item.posterImg}
                        index={index}
                        viewerRef={viewerRef}
                    ></TouchableImage>
                    : null
            }

            <Pressable onPress={itemPress} style={{ width: item.posterImg ? '67%' : '100%' }}>
                <Column>
                    <Text style={styles.title}>{item.name}</Text>
                    {
                        item.tags ? <View style={styles.tags}>
                            {item.tags.split(',').map((tg, i) => (<Text fontSize={'xs'} key={i} style={styles.tagItem}>{tg}</Text>))}
                        </View> : null
                    }

                    {
                        item.price ? <View style={styles.tags}>
                            <Text fontSize={'xs'} style={[styles.tagItem, { fontSize: 10, backgroundColor: '#07c160' }]}>{item.price}</Text>
                            <Text fontSize={'xs'}>{item.priceTime}</Text>
                        </View> : null
                    }
                    <View style={styles.tags}>
                        {
                            item.score ? (
                                <>
                                    <Ionicons name={'star-outline'} size={16} color={"gray"}></Ionicons>
                                    <Text fontSize={'xs'} style={(item.score - 0) > 8 ? { color: 'green' } : null}> {item.score} </Text>
                                    <Text style={styles.emptySeat}></Text>
                                </>
                            ) : null
                        }
                        <Ionicons name={'archive-outline'} size={16} color={"gray"}></Ionicons>
                        <Text fontSize={'xs'}> {item.size} </Text>
                    </View>
                    <View style={styles.tags}>
                        <Box flexDirection={'row'} mr={3}>
                            <Ionicons name={'arrow-up-outline'} size={16} color={"gray"}></Ionicons>
                            <Text fontSize={'xs'}> {item.distribute} </Text>
                        </Box>

                        <Box flexDirection={'row'} mr={3}>
                            <Ionicons name={'arrow-down-outline'} size={16} color={"gray"}></Ionicons>
                            <Text fontSize={'xs'}> {item.downloads} </Text>
                        </Box>

                        <Box flexDirection={'row'}>
                            <Ionicons name={'happy-outline'} size={16} color={"gray"}></Ionicons>
                            <Text fontSize={'xs'}> {item.completes} </Text>
                        </Box>
                    </View>
                </Column>
            </Pressable>

        </View>

    );
}

const styles = StyleSheet.create({
    card: {
        display: 'flex',
        flexDirection: 'row',
        borderRadius: 10,
        marginBottom: 10,
        // paddingHorizontal: 5,
        paddingVertical: 15,
        // borderColor: "#000",
        // backgroundColor: '#fff',
        overflow: 'hidden',
        // borderWidth: 1
    },
    right: {
        display: 'flex',
        flexDirection: 'column',
        paddingLeft: 5,
        // width: 300
    },
    title: {
        fontSize: 16,
        fontWeight: 600,
        marginBottom: 4,
    },
    tags: {
        display: 'flex',
        flexDirection: 'row',
        marginBottom: 1,
        alignSelf: 'flex-start'
    },
    tagItem: {
        backgroundColor: '#ff976a',
        marginRight: 5,
        borderRadius: 30,
        paddingHorizontal: 4,
        color: '#fbfbfb'
    },
    emptySeat: {
        width: 15
    }
})

class ListItem extends React.PureComponent {
    render() {
        const { item, viewerRef, index } = this.props
        return (
            <ArticleItem viewerRef={viewerRef} index={index} item={item} siteid={item.currentSid} plateid={item.currentPid}></ArticleItem>
        )
    }
}

export default ListItem